<!DOCTYPE HTML>
<html>

<head>
    <title>three.proton - eightdiagrams</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
    body {
        font-family: Monospace;
        background-color: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    </style>
</head>
<script type="importmap">
    {
        "imports": {
            "three": "../build/three152.module.js",
            "three/addons/": "./jsm/"
        }
    }
</script>
<body>
    <div id="container"></div>
    <script src="../lib/stats.min.js"></script>
    <!-- <script src="../lib/three.min.js"></script> -->
    <!-- <script src="../build/three.proton.min.js"></script> -->
    <!-- <script src="./js/lib/TrackballControls.js"></script> -->
    <!-- 光效不对 -->
    <script type="module">
        import * as THREE from 'three';
        import  { TrackballControls} from  '../build/TrackballControls.js'
        import { Proton }  from '../dist/three.proton.js'
    var proton, emitter1, emitter2, R;
    var camera, scene, renderer, stats, clock, spring, controls;

    init();
    function init() {
        addScene();
        addControls();
        addLights();
        addStars();
        addProton();
        //addInteraction();
        addStats();
        animate();
    }

    function addScene() {
        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 500;
        scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0xffffff, 1, 10000);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
    }

    function addControls() {
        controls = new TrackballControls(camera, renderer.domElement);
        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.2;
        controls.panSpeed = 0.8;
        controls.noZoom = false;
        controls.noPan = false;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;
    }

    function addLights() {
        var ambientLight = new THREE.AmbientLight(0x101010);
        scene.add(ambientLight);

        var pointLight = new THREE.PointLight(0xffffff, 2, 1000, 1);
        pointLight.position.set(0, 200, 200);
        scene.add(pointLight);
    }

    function addStats() {
        stats = new Stats();
        stats.showPanel(0);
        stats.dom.style.position = 'absolute';
        stats.dom.style.left = '0px';
        stats.dom.style.top = '0px';
        container.appendChild(stats.dom);
    }

    function addStars() {
        var geometry = new THREE.BufferGeometry();
        const vertices = []
        for (var i = 0; i < 10000; i++) {
        
            let x = THREE.MathUtils.randFloatSpread(2000);
            let y = THREE.MathUtils.randFloatSpread(2000);
            let z = THREE.MathUtils.randFloatSpread(2000);
            vertices.push(x ,y,z);
        }
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
        var particles = new THREE.Points(geometry, new THREE.PointsMaterial({
            color: 0x888888
        }));
        scene.add(particles);
    }

    function addProton() {
        proton = new Proton();

        R = 70;
        emitter1 = createEmitter(R, 0, '#4F1500', '#0029FF');
        emitter2 = createEmitter(-R, 0, '#004CFE', '#6600FF');

        proton.addEmitter(emitter1);
        proton.addEmitter(emitter2);
        proton.addRender(new Proton.SpriteRender(scene));

    }

    function createSprite() {
        var map = new THREE.TextureLoader().load("./img/dot.png");
        var material = new THREE.SpriteMaterial({
            map: map,
            color: 0xff0000,
            blending: THREE.AdditiveBlending,
            fog: true
        });
        return new THREE.Sprite(material);
    }

    function createEmitter(x, y, color1, color2) {
        var emitter = new Proton.Emitter();
        emitter.rate = new Proton.Rate(new Proton.Span(5, 7), new Proton.Span(.01, .02));
        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Life(2));
        emitter.addInitialize(new Proton.Body(createSprite()));
        emitter.addInitialize(new Proton.Radius(80));
        emitter.addInitialize(new Proton.V(200, new Proton.Vector3D(0, 0, -1), 0));


        emitter.addBehaviour(new Proton.Alpha(1, 0));
        emitter.addBehaviour(new Proton.Color(color1, color2));
        emitter.addBehaviour(new Proton.Scale(1, 0.5));
        emitter.addBehaviour(new Proton.CrossZone(new Proton.ScreenZone(camera, renderer), 'dead'));


        emitter.addBehaviour(new Proton.Force(0, 0, -20));
        // emitter.addBehaviour(new Proton.Attraction({
        //     x: 0,
        //     y: 0,
        //     z: 0
        // }, 5, 250));



        emitter.p.x = x;
        emitter.p.y = y;
        emitter.emit();

        return emitter;
    }

    function animate() {
        stats.begin();
        requestAnimationFrame(animate);
        animateEmitter();
        render();
        stats.end();
    }

    var ctha = 0;
    function render() {
        proton.update();
        controls.update();
        renderer.render(scene, camera);

        // camera.lookAt(scene.position);
        ctha += .02;
        // camera.position.x = Math.sin(ctha) * 500;
        // camera.position.z = Math.cos(ctha) * 500;
        // camera.position.y = Math.sin(ctha) * 500;

        Proton.Debug.renderInfo(proton, 3);
    }

    var tha = 0;

    function animateEmitter() {
        tha += .13;
        emitter1.p.x = R * Math.cos(tha);
        emitter1.p.y = R * Math.sin(tha);

        emitter2.p.x = R * Math.cos(tha + Math.PI / 2);
        emitter2.p.y = R * Math.sin(tha + Math.PI / 2);
    }

    function onWindowResize() {

    }
    </script>
</body>

</html>
